<template>
    <div>
        <button @click="isVisible = !isVisible">点击切换</button>
        <transition-group name="fade">
            <h1 v-show="isVisible" :key="1">hello,world</h1>
            <h1 v-show="!isVisible" :key="2">hello,world</h1>
        </transition-group>
    </div>
</template>

<script>
import 'animate.css'
export default {
    data() {
        return {
            isVisible: true
        }
    }
}
</script>

<style lang="less" scoped>
h1 {
    background-color: red;
}

// @keyframes animation1 {
//     from {
//         opacity: 0;
//         transform: translateX(-100%)
//     }

//     to {
            
//         transform: translateX(0)
//     }
// }

// .fade-enter-active {
//     animation: animation1 1s linear;
// }

// .fade-leave-active {
//     animation: animation1 1s linear reverse;
// }

.fade-enter,
.fade-leave-to {
    opacity: 0;
    transform: translateX(-100%)
}


.fade-enter-active,
.fade-leave-active {
    transition: all 1s linear;
}

.fade-enter-to,
.fade-leave {
    opacity: 1;
}
</style>